<template>
  <div class="login-wrap">
    <div class="ms-login">
      <div class="ms-title">alisleepy后台管理</div>
      <el-form :model="param"
               :rules="rules"
               ref="login"
               label-width="0px"
               class="ms-content">
        <el-form-item prop="name">
          <el-input v-model="param.name"
                    placeholder="账户名">
            <template #prepend>
              <el-button icon="el-icon-user"></el-button>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input type="password"
                    placeholder="密码"
                    v-model="param.password"
                    @keyup.enter="submitForm()">
            <template #prepend>
              <el-button icon="el-icon-lock"></el-button>
            </template>
          </el-input>
        </el-form-item>
        <div class="login-btn">
          <el-button type="primary"
                     @click="submitForm()">登录</el-button>
        </div>
        <!-- <p class="login-tips">Tips : 账户名和密码随便填。</p> -->
      </el-form>
    </div>
  </div>
</template>

<script>
import { reactive } from "vue";
import { toRaw } from "vue"
import { useRouter } from "vue-router";
import { ElMessage } from "element-plus";
import { loginUrl } from "../api/index";
import { setToken } from "../utils/auth";
export default {
  setup() {
    const router = useRouter();
    // vue3中proxy对象：响应式数据,方便修改值
    const param = reactive({
      name: "",
      password: "",
    });

    const rules = {
      name: [
        {
          required: true,
          message: "请输入账户名",
          trigger: "blur",
        },
      ],
      password: [
        { required: true, message: "请输入密码", trigger: "blur" },
      ],
    };
    // vue3中proxy对象无法直接post传递给后端，需要传递target具体的值，toRaw(proxy对象)获取对象的值
    const submitForm = () => {
      loginUrl(toRaw(param)).then(res => {
        if (res && res.code === 0 && (res.data.token).length > 0) {
          // 1、登录成功弹框
          ElMessage.success("登录成功")
          // 2、保存token
          setToken(res.data.token)
          localStorage.setItem("ali_name", res.data.name);
          // 3、跳转到首页
          router.push("/index")
        } else {
          // 返回错误信息
          ElMessage.warning(res.msg)
        }
      })
    };
    // const store = useStore();
    // store.commit("clearTags");

    // 返回给到模板
    return {
      param,
      rules,
      submitForm,
    };
  },
};
</script>

<style scoped>
.login-wrap {
  position: relative;
  width: 100%;
  height: 100%;
  background-image: url(../assets/img/login-bg.jpg);
  background-size: 100%;
}
.ms-title {
  width: 100%;
  line-height: 50px;
  text-align: center;
  font-size: 20px;
  color: #fff;
  border-bottom: 1px solid #ddd;
}
.ms-login {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 350px;
  margin: -190px 0 0 -175px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.3);
  overflow: hidden;
}
.ms-content {
  padding: 30px 30px;
}
.login-btn {
  text-align: center;
}
.login-btn button {
  width: 100%;
  height: 36px;
  margin-bottom: 10px;
}
.login-tips {
  font-size: 12px;
  line-height: 30px;
  color: #fff;
}
</style>